import type { Column } from "@/components/CrudPage/type";
import StatusTag from "@/components/SRComponents/StatusTag/index.vue";
import SysRoleSelect from "../sysRole/components/SysRoleSelect.vue";
import SysPostSelect from "../sysPost/components/SysPostSelect.vue";
import SysDeptSelect from "../sysDept/components/SysDeptSelect.vue";
import UserStatus from "@/components/SRComponents/StatusSwitch/UserStatus.vue";

export function useSysUserProvider() {
  // 列配置
  const columns: Column[] = [
    {
      label: "头像",
      slot: "avatar",
      prop: "avatar",
      create: true,
      edit: true
    },
    {
      label: "账号",
      slot: "username",
      prop: "username",
      create: true,
      edit: true,
      colProps: { span: 12 }
    },
    {
      label: "昵称",
      slot: "nickName",
      prop: "nickName",
      create: true,
      edit: true,
      colProps: { span: 12 }
    },

    {
      label: "Email",
      slot: "email",
      prop: "email",
      create: true,
      edit: true,
      colProps: { span: 12 }
    },

    {
      label: "电话",
      slot: "phone",
      prop: "phone",
      create: true,
      edit: true,
      colProps: { span: 12 }
    },
    {
      label: "状态",
      slot: "status",
      prop: "status",
      create: true,
      edit: true,
      colProps: { span: 12 },
      valueType: "switch",
      cellRenderer: ({ row }) => <StatusTag status={row.status} />,
      renderField: (value, onChange) => (
        <UserStatus vModel={value} onChange={onChange} />
      )
    },
    {
      label: "角色",
      slot: "roleId",
      prop: "roleId",
      create: true,
      edit: true,
      cellRenderer: ({ row }) => <span>{row.role?.roleName || "-"}</span>,
      renderField: (value, onChange) => (
        <SysRoleSelect vModel={value} onChange={onChange} />
      )
    },
    {
      label: "部门",
      slot: "deptId",
      prop: "deptId",
      create: true,
      edit: true,
      cellRenderer: ({ row }) => <span>{row.dept?.deptName || "-"}</span>,
      renderField: (value, onChange) => (
        <SysDeptSelect vModel={value} onChange={onChange} />
      )
    },
    {
      label: "职位",
      slot: "postId",
      prop: "postId",
      create: true,
      edit: true,
      cellRenderer: ({ row }) => <span>{row.post?.postName || "-"}</span>,
      renderField: (value, onChange) => (
        <SysPostSelect vModel={value} onChange={onChange} />
      )
    },
    {
      label: "操作",
      prop: "operation",
      slot: "operation"
    }
  ];

  return {
    columns
  };
}
